<template>
  <div class="right_order">
    <!-- 操作按钮 -->
    <div class="opt_btns">
      <div
        :class="curBtnStatus == 'buy' ? 'success_btn' : 'plain_btn'"
        @click="toBuy"
      >
        买入
      </div>
      <div
        :class="curBtnStatus == 'sell' ? 'delete_btn' : 'plain_btn'"
        @click="toSell"
      >
        卖出
      </div>
    </div>
    <!-- 限价单 -->
    <div class="opt_li">
      <span>限价单</span>
      <div class="right">
        <span
          ><el-icon><WarningFilled /></el-icon
        ></span>
        <span
          ><el-icon><CaretBottom /></el-icon
        ></span>
      </div>
    </div>
    <!-- 价格 -->
    <div class="opt_li">
      <span>价格（USDT）</span>
      <div class="right">
        <span
          ><el-icon><Plus /></el-icon
        ></span>
        <span
          ><el-icon><Minus /></el-icon
        ></span>
      </div>
    </div>
    <!-- 数量 -->
    <div class="opt_li">
      <span>数量（BTC）</span>
      <div class="right">
        <span
          ><el-icon><Plus /></el-icon
        ></span>
        <span
          ><el-icon><Minus /></el-icon
        ></span>
      </div>
    </div>
    <!-- 百分比列表 -->
    <ul class="percent_list">
      <li
        v-for="(item, index) in percentList"
        :key="index"
        @click="selectPercent(index)"
      >
        <span
          v-if="curBtnStatus == 'buy'"
          :class="curPercent == index ? 'actived_buy top' : 'top'"
        ></span>
        <span
          v-else
          :class="curPercent == index ? 'actived_sell top' : ' top'"
        ></span>
        <span class="bot">{{ item }}</span>
      </li>
    </ul>
    <!-- 总额 -->
    <div class="tot_amount">
      <div>总额(USDT)</div>
      <div class="flex">
        <p>可用</p>
        <p>
          <span style="color: #ffffff">0 USDT</span>
          <img src="@/assets/common/add_icon.png" alt="" />
        </p>
      </div>
      <div class="flex">
        <p>可买</p>
        <p>
          <span style="color: #ffffff">0 USDT</span>
        </p>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div v-if="curBtnStatus == 'buy'" class="success_btn mt_20">买入BTC</div>
    <div v-else class="delete_btn mt_20">买入BTC</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 当前高亮的百分比
const curPercent = ref(0);
// 当前按钮状态
const curBtnStatus = ref("buy");

// 百分比列表
const percentList = ref(["25%", "50%", "75%", "100%"]);

// 选择百分比
const selectPercent = (index: number) => {
  curPercent.value = index;
};

// 买入
const toBuy = () => {
  curPercent.value = 0;
  curBtnStatus.value = "buy";
};

// 卖出
const toSell = () => {
  curPercent.value = 0;
  curBtnStatus.value = "sell";
};
</script>

<style lang="scss" scoped>
.right_order {
  color: #8e9399;
  .opt_btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    div {
      text-align: center;
      padding: 5px 0px;
      flex: 1;
    }
    .success_btn {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    .delete_btn {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }
  }
  .opt_li {
    margin: 20px 0;
    background-color: #141515;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    font-size: 14px;
    .right {
      span {
        margin-left: 10px;
      }
    }
  }
  .percent_list {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    li {
      display: flex;
      flex-direction: column;
      width: 23%;
      .top {
        background-color: #141515;
        height: 10px;
      }
      .actived_buy {
        background-color: #2ebd85;
      }
      .actived_sell {
        background-color: #f6465d;
      }
      .bot {
        margin-top: 5px;
        font-size: 14px;
        text-align: center;
      }
    }
  }
  .tot_amount {
    font-size: 14px;
    div {
      margin-bottom: 20px;
    }
    & > div:first-child {
      padding: 5px 0;
      font-size: 16px;
      text-align: center;
      background-color: #141515;
      border-radius: 5px;
    }
    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      P {
        img {
          width: 24px;
          height: 24px;
          margin-left: 10px;
        }
      }
      & > p:last-child {
        display: flex;
        align-items: center;
      }
    }
  }
  .delete_btn,
  .success_btn {
    padding: 5px;
    text-align: center;
    border-radius: 5px;
  }
  // 公共样式
  .mt_20 {
    margin: 20px 0;
  }
}
</style>
